<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>投诉</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <!-- body 最后 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
    <style>
        .loading{
            display:none;		
            position:fixed;
            width:680px;
            height:20px;
            left: 50%;
            top: 10%;
            transform: translate(-50%,-50%);
            text-align: center;
        }
        .loading li{
        	display: inline-block;
        	width: 12px;
        	height: 12px;
        	background: black;
        	border-radius:50%;
        }
        .loading-ani{
        	animation: loading-ani 1s infinite linear;
        }
        @keyframes loading-ani{
        	0%{
        		transform: scale(0.5);
        	}
        	100%{
        		transform: scale(1);
        	}
        }
        .loading-ani1{
        	animation-delay: 0.5s;
        }
        .loading-ani2{
        	animation-delay: 0.2s;
        }
        .loading-ani3{
        	animation-delay: 0s;
        }
    </style>
</head>

<body right-click>
    <div class="weui-cells__title" id="tstitle">请选择投诉网页的原因：</div>
    <div class="weui-cells" id="tspage_1">
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页包含欺诈信息（如：假红包）</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页包含色情信息</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页包含暴力恐怖信息</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页包含政治敏感信息</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页在收集个人隐私信息（如：钓鱼链接）</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页包含诱导分享性质的内容</p></div>
            <div class="weui-cell__ft"></div>
        </a>
        <a class="weui-cell weui-cell_access" href="javascript: subTSinfo();">
            <div class="weui-cell__bd"><p>网页可能包含谣言信息</p></div>
            <div class="weui-cell__ft"></div>
        </a>
    </div>
    <div class="weui-cells" id="tspage_2">
        <a class="weui-cell weui-cell_access" href="javascript: subSHinfo();">
            <div class="weui-cell__bd"><p>提交给微信团队审核</p></div>
            <div class="weui-cell__ft"></div>
        </a>
    </div>
    <!--操作成功-->
    <div class="loading">
        <ul>
            <li class="loading-ani loading-ani1"></li>
            <li class="loading-ani loading-ani2"></li>
            <li class="loading-ani loading-ani3"></li>
        </ul>
    </div> 
    <div class="weui-msg" id="shpage_3">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">投诉已提交</h2>
            <p class="weui-msg__desc">微信团队会尽快核实，并通过“微信团队”通知你的审核结果。感谢你的支持。</p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                 <a href="javascript:wx.closeWindow();" class="weui-btn weui-btn_primary">关闭</a>
            </p>
        </div>
    </div>
    <div class="complain-btn" style="position: fixed;right:10px;bottom:10%;width: 30px;height: 30px;font-size:12px;text-align: center;line-height: 30px;border-radius: 50%;background: rgba(0,0,0,.2);color: #fff;"><a href="http://baidu.com	" style="color: #Fff;">投诉</a></div>
	<script type="text/javascript" defer="defer">
	    $(document).ready(function(){
	      $("#tspage_2").hide();
	      $("#shpage_3").hide();
	    });
	    function subTSinfo() {
	      $("#tspage_1").hide();
	      $("#tspage_2").show();
	      $("#tstitle").html("你可以：");
	    }
	    function subSHinfo() {
	      $("#tspage_1").hide();
	      $("#tspage_2").hide();
	      $("#tstitle").hide();
	      $('.loading').show()
	      //假装提交投诉，延迟800毫秒直接返回结果
	      setTimeout(showResult,800)
	    }
	    function showResult(){
	    	 $('.loading').hide()
	    	$("#shpage_3").show();
	    }
    </script>
</body>
</html>
